'use client';

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import Slider from 'react-slick';
import styled from 'styled-components';
import { inter, roboto, lato } from './fonts';
import { Speed, Payments, Dvr } from '@mui/icons-material';

// @ts-expect-error
export default function ProductsSlider({ list }) {
  const settings = {
    customPaging: function (i: string | number) {
      return (
        <a>
          {[
            [
              <Speed key={'s'} style={{ fontSize: 40 }} />,
              <Payments key={'p'} style={{ fontSize: 40 }} />,
              <Dvr key={'d'} style={{ fontSize: 40 }} />,
            ][i as number],
          ]}
        </a>
      );
    },
    dots: true,
    fade: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    waitForAnimate: false,
    draggable: false,
  };

  return (
    <SliderEl className="slider-container">
      {/*@ts-expect-error*/}
      <Slider {...settings}>
        {!!list?.length &&
          list.map((item: object, i: number) => {
            return (
              <div
                key={i}
                className={
                  'slider-item relative !flex h-[276px] flex-col rounded-[10px] p-6'
                }
              >
                {/* @ts-expect-error*/}
                {!!item?.groupName && (
                  <h1
                    className={`pb-4 text-[26px] font-semibold ${roboto.className}`}
                  >
                    {/* @ts-expect-error*/}
                    {item?.groupName}
                  </h1>
                )}

                <div
                  className={` ${lato.className} flex flex-1 flex-col gap-4 bg-white p-4`}
                >
                  <div className="flex flex-col items-center justify-center py-2">
                    <div
                      className={`${roboto.className} text-center text-[28px] font-semibold text-[#0687FF]`}
                    >
                      {/* @ts-expect-error*/}
                      {item?.title}
                    </div>
                    <div
                      className={`${roboto.className} text-center text-[22px] font-normal uppercase`}
                    >
                      {/* @ts-expect-error*/}
                      {item?.subtitle}
                    </div>
                    <div className={'mt-4 h-[2px] w-1/3 bg-[#0687FF]'} />
                  </div>
                  <div
                    className={`indent-6 text-xl text-gray-700 first-letter:text-2xl first-letter:font-bold`}
                  >
                    {/* @ts-expect-error*/}
                    {item?.description}
                  </div>
                </div>
              </div>
            );
          })}
      </Slider>
    </SliderEl>
  );
}

const SliderEl = styled.div`
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;

  .slick-slider {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    user-select: auto;
    .slick-list {
      order: 2;
      background: #f6f8fa;
      border-radius: 10px;
      flex: 1;
      display: flex;
      min-height: 0;
      .slick-track,
      .slick-slide,
      .slick-slide > div,
      .slider-item {
        display: flex;
        flex-wrap: nowrap;
        flex: 1;
        min-height: 0;
      }
      .slick-slide > div {
        flex-direction: column;
      }
    }

    .slick-dots {
      order: 1;
      position: static;
      width: 100%;
      height: 140px;
      display: flex !important;
      gap: 24px;
      justify-content: center;
      & > li {
        transition: all 0.3s ease-in-out;
        display: flex;
        width: auto;
        height: auto;
        & > a {
          display: flex;
          width: 90px;
          height: 90px;
          background: #fff;
          align-items: center;
          justify-content: center;
          color: #a0a0a0;
          border-radius: 10px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          position: relative;
          &:after {
            content: '';
            height: 0;
            width: 1px;
            background: #0687ff;
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            opacity: 0;
            transition: all 0.3s ease-in-out;
          }
          &:before {
            content: '';
            height: 8px;
            width: 8px;
            background: #0687ff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 90px;
            transform: translateX(-50%);
            opacity: 0;
            transition: all 0.3s ease-in-out;
          }
        }
        &.slick-active {
          flex: 1;
          & > a {
            border: 1px solid #0687ff;
            color: #0687ff;
            &:before {
              top: 136px;
              opacity: 1;
            }
            &:after {
              height: 50px;
              opacity: 1;
            }
          }
        }
      }
    }
  }
  .slick-arrow {
    display: none !important;
  }
`;
